<template>
	<view>
		<wode-jisuan :tabBars="tabBars" :tabIndex="tabIndex" @tabtap="tabtap"></wode-jisuan>
		<swiper class="swiper-box" :style="{height:swiperheight+'px'}" :current="tabIndex" @change="tabChange">
			<swiper-item v-for="(items,indexs) in tabBars" :key="indexs">
				<scroll-view scroll-y="true" class="list">
					<template>
						<!-- 内容 -->
						<view>
							<scroll-view scroll-y="true" class="list">
								<view class="m-bg-bs">
									<u-cell-group>
										<u-cell size="large" v-for="(item, index) in column" :key="index"
											:title="item.title" :value="item.value"></u-cell>
									</u-cell-group>

									<view
										class="custom-style u-flex u-flex-center u-flex-items-center m-c-w m-br-10 u-m-t-20">
										开始计算</view>

									<view class="m-bg-jg m-c-w u-m-t-70">
										<u-subsection activeColor="#DBB07B" mode="subsection" :list="list1"
											:current="current" @change="sectionChange"></u-subsection>
										<view class="u-m-t-35">
											<u-grid :border="true" col="4">
												<u-grid-item v-for="(listItem,listIndex) in list" :key="listIndex">
													<view class="u-m-b-15">{{listItem.name}}</view>
													<text class="u-m-b-20">{{listItem.title}}</text>
												</u-grid-item>
											</u-grid>
										</view>
									</view>

									<u-grid :border="false" col="4">
										<u-grid-item v-for="(baseListItem,baseListIndex) in baseList"
											:key="baseListIndex">
											<text class="u-m-25 m-font-b u-font-28">{{baseListItem.title}}</text>
										</u-grid-item>
									</u-grid>

									<!-- 第1年 -->
									<view class="u-m-l-30">
										<u-collapse @change="change" @close="close" @open="open">
											<u-collapse-item title="第1年" name="Docs guide">
												<view class="w-b-l">
													<u-grid :border="false" col="4" v-for="(i,u) in 7" :key="u">
														<u-grid-item v-for="(baseListItem,baseListIndex) in baseList"
															:key="baseListIndex">
															<text class="u-m-25 u-font-28">{{baseListItem.title}}</text>
														</u-grid-item>
													</u-grid>
												</view>
											</u-collapse-item>
										</u-collapse>
									</view>

								</view>
							</scroll-view>
						</view>
					</template>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabIndex: 0, // 选中的
				swiperheight: 500, //高度
				tabBars: [{
						name: "商业贷款",
						id: "guanzhu"
					},
					{
						name: "组合贷款",
						id: "tuijian"
					},
					{
						name: "公积金贷款",
						id: "tiyu"
					}
				],
				column: [{
						title: '商贷金额：',
						value: '2090 万元'
					},
					{
						title: '贷款期限：',
						value: '120 期'
					},
					{
						title: '商贷利息：',
						value: ''
					}
				],
				list: [{
						name: '100万',
						title: '贷款总额'
					},
					{
						name: '100万',
						title: '还款总额'
					},
					{
						name: '100万',
						title: '贷款利息'
					},
					{
						name: '100万',
						title: '还款时间'
					},
				],
				list1: ['等额本息', '等额本金'],
				current: 0,
				baseList: [{
						title: '期数'
					},
					{
						title: '还款本金'
					},
					{
						title: '还款利息'
					},
					{
						title: '还款金额'
					}
				],

			}
		},
		onLoad() {
			uni.getSystemInfo({
				success: (res) => {
					let height = res.windowHeight - uni.upx2px(100)
					this.swiperheight = height;
				}
			})
		},
		methods: { //接受子组件传过来的值点击切换导航
			open(e) {
				// console.log('open', e)
			},
			close(e) {
				// console.log('close', e)
			},
			change(e) {
				// console.log('change', e)
			},
			sectionChange(index) {
				this.current = index;
			},
			tabtap(index) {
				console.log('是点击不咯')
				this.tabIndex = index;
			},
			//滑动切换导航
			tabChange(e) {
				// console.log(e, '滑动切换')
				this.tabIndex = e.detail.current;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.m-bg-bs {
		background-color: #fff;
	}

	.custom-style {
		width: 90%;
		height: 70rpx;
		margin: auto;
		background-color: #0E5642;
	}

	.m-bg-jg {
		height: 250rpx;
		padding: 30rpx;
		background-color: #0E5642;
	}

	.b-bg {
		background-color: #F2F2F2;
	}

	.list {
		height: calc(100vh - (100rpx));
	}

	.u-cell-text {
		margin-left: 30rpx;
	}

	.w-b-l {
		width: 100%;
		margin-left: -25rpx;
	}
</style>
